(function()
{
  var myChart = echarts.init(document.querySelector(".line1 .chart"));
  var option = {
    color: ['#80FFA5', '#00DDFF'],
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        label: {
          backgroundColor: '#6a7985'
        }
      }
    },
    legend: {
      // data: ['常住人口','城镇人口']
    },
    toolbox: {
      feature: {
        saveAsImage: {}
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        boundaryGap: false,
        data: ['2025', '2026', '2027', '2028', '2029', '2030', '2031','2032', '2033', '2034', '2035'],
        axisLabel: {
          textStyle: {
              color: 'white' // 改变x轴标签颜色
          }
      }
      }
    ],
    yAxis: [
      {
        min:1000,
        max:3000,
        type: 'value',
        axisLabel: {
          textStyle: {
              color: 'white' // 改变y轴标签颜色
          }
      }
      }
    ],
    series: [
      {
        name: '常驻人口',
        type: 'line',
        //stack: 'Total',
        smooth: true,
        lineStyle: {
          width: 0
        },
        showSymbol: false,
        areaStyle: {
          opacity: 0.8,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: 'rgb(128, 255, 165)'
            },
            {
              offset: 1,
              color: 'rgb(1, 191, 236)'
            }
          ])
        },
        emphasis: {
          focus: 'series'
        },
        data: [2538.43,2545.92,2552.69,2558.79,2564.30,2569.27,2573.75,2577.79,2581.43,	2584.71,2587.66,]
      },
      {
        name: '城镇人口',
        type: 'line',
        //stack: 'Total',
        smooth: true,
        lineStyle: {
          width: 0
        },
        showSymbol: false,
        areaStyle: {
          opacity: 0.8,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: 'rgb(0, 221, 255)'
            },
            {
              offset: 1,
              color: 'rgb(77, 119, 255)'
            }
          ])
        },
        emphasis: {
          focus: 'series'
        },
        data: [2266.78,2273.48,2279.52,2284.97,2289.89,2294.32,2298.32,2301.93,2305.18,2308.11,2310.75,]
      },
      
    ]
  };
  myChart.setOption(option);
  window.addEventListener("resize", function() {
   myChart.resize();
     });
}
)();


// 饼形图2 地区分布模块
(function() {
  var myChart = echarts.init(document.querySelector(".pie2 .chart"));
  var option = {
    color: [
      "#006cff",
      "#60cda0",
      "#ed8884",
      "#ff9f7f",
      "#0096ff",
      "#9fe6b8",
      "#32c5e9",
      "#1d9dff"
    ],
    tooltip: {
      trigger: "item",
      formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    legend: {
      bottom: "0%",
      itemWidth: 10,
      itemHeight: 10,
      textStyle: {
        color: "rgba(255,255,255,.5)",
        fontSize: "12"
      }
    },
    series: [
      {
        name: "人口数量分布比",
        type: "pie",
        radius: ["10%", "70%"],
        center: ["50%", "50%"],
        roseType: "radius",
        // 图形的文字标签
        label: {
          fontSize: 10
        },
        // 链接图形和文字的线条
        labelLine: {
          // length 链接图形的线条
          length: 6,
          // length2 链接文字的线条
          length2: 8
        },
        data: [
          { value: 576.2, name: "浦东新区" },
          { value: 267.2,name: "闵行区" },
          { value: 223.3, name: "宝山区" },
          { value: 190.1, name: "松江区 " },
          { value: 183.2, name: "嘉定区" },
          { value: 130.1, name: "青浦区 " },
          { value: 124.6, name: "杨浦区 " },
          { value: 138.3, name: "普陀区" }
        ]
      }
    ]
  };
  myChart.setOption(option);
  // 监听浏览器缩放，图表对象调用缩放resize函数
  window.addEventListener("resize", function() {
    myChart.resize();
  });
})();



//地图板块
(function(){
  var myChart=echarts.init(document.querySelector(".map .chart"));
  //指定配置项和数据
  option = {
    tooltip : {
        trigger: 'item',
        formatter: '{b}'
    },
    series : [{
        name: '上海',
        type: 'map',
        mapType: '上海',
        roam: false,
        top:'8%',
        zoom:1.3,
        x:'25%',
        selectedMode : 'single',
        itemStyle:{
            normal:{
                label:{
                    show:true,
                    textStyle: {
                        color: "#231816"
                    }
                },
                areaStyle:{color:'#B1D0EC'},
                color:'#B1D0EC',
                borderColor:'#dadfde'
            },
            emphasis:{
                label:{
                    show:true,
                    textStyle:{
                        color:'#fa4f04'
                    }
                },
                areaStyle:{color:'red'}
            }
        },
        data:[
            {name:'黄浦区',
                itemStyle: {
                    normal: {
                        areaColor: '#13d5ff',
                        borderColor: '#edce00'
                    }
                }
            },
            {name:'徐汇区',
                itemStyle: {
                    normal: {
                        areaColor: '#13d5ff',
                        borderColor: '#0abcee'
                    }
                }
            }, 
            {name:'长宁区',
                itemStyle: {
                    normal: {
                        areaColor: '#92d050',
                        borderColor: '#1ca9f2'
                    }
                }
            },
            {name:'静安区',
                itemStyle: {
                    normal: {
                        areaColor: '#88ddf5',
                        borderColor: '#88ddf5',
                    }
                }
            },
            {name:'普陀区',
                itemStyle: {
                    normal: {
                        areaColor: '#13d5ff',
                        borderColor: '#45b5ef',
                    }
                }
            },
            {name:'虹口区',
                itemStyle: {
                    normal: {
                        areaColor: '#13d5ff',
                        borderColor: '#45b5ef'
                    }
                }
            },
            {name:'杨浦区',
                itemStyle: {
                    normal: {
                        areaColor: '#45b5ef',
                        borderColor: '#45b5ef',
                    }
                }
            },
            {name:'闵行区',
                itemStyle: {
                    normal: {
                        areaColor: '#ffd811',
                        borderColor: '#45b5ef',
                    }
                }
            },
            {name:'宝山区',
                itemStyle: {
                    normal: {
                        areaColor: '#ffa312',
                        borderColor: '#45b5ef',
                    }
                }
            },
            {name:'嘉定区',
                itemStyle: {
                    normal: {
                        areaColor: '#92d050',
                        borderColor: '#1ca9f2'
                    }
                }
            },
            {name:'浦东新区',
                itemStyle: {
                    normal: {
                        areaColor: '#88ddf5',
                        borderColor: '#88ddf5',
                    }
                }
            },
            {name:'金山区',
                itemStyle: {
                    normal: {
                        areaColor: '#13d5ff',
                        borderColor: '#45b5ef',
                    }
                }
            },
            {name:'松江区',
                itemStyle: {
                    normal: {
                        areaColor: '#13d5ff',
                        borderColor: '#45b5ef'
                    }
                }
            },
            {name:'青浦区',
                itemStyle: {
                    normal: {
                        areaColor: '#45b5ef',
                        borderColor: '#45b5ef',
                    }
                }
            },
            {name:'奉贤区',
                itemStyle: {
                    normal: {
                        areaColor: '#13d5ff',
                        borderColor: '#45b5ef',
                    }
                }
            },
           
           {name:'崇明区',
                itemStyle: {
                    normal: {
                        areaColor: '#92d050',
                        borderColor: '#1ca9f2'
                    }
                }
            },
        ]
    }]
};
//3把配置项给实例对象
myChart.setOption(option);
})();


   //疾病详情
   (function()
   {
    // var myChart=echarts.init(document.querySelector(".map .chart"));
    var myChart = echarts.init(document.querySelector(".pie3 .chart"));
    var option = {
     color:["#5470c6","#91cc75","#fac858","#ee6666","#73c0de","#3ba272","#fc8452","#9a60b4","#ea7ccc"],
     tooltip: {
       trigger: 'item',
       formatter: '{a} <br/>{b}: {c} ({d}%)'
     },
     legend: {
       data: [
         'Direct',
         'Marketing',
         'Search Engine',
         'Email',
         'Union Ads',
         'Video Ads',
         'Baidu',
         'Google',
         'Bing',
         'Others'
       ]
     },
     series: [
       {
         name: '男女人数比',
         type: 'pie',
         selectedMode: 'single',
         radius: [0, '30%'],
         label: {
           position: 'inner',
           fontSize: 14
         },
         labelLine: {
           show: false
         },
         data: [
          //  { value: 6, name: '甲类' },
           { value: 1309.3, name: '男性'},
           { value: 1278.3, name: '女性' }
         ]
       },
       {
         name: '人口年龄段比详情',
         type: 'pie',
         radius: ['40%', '60%'],
         labelLine: {
           length: 30
         },
         label: {
           formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
           backgroundColor: '#F6F8FC',
           borderColor: '#8C8D8E',
           borderWidth: 1,
           borderRadius: 3,
           rich: {
             a: {
               color: '#6E7079',
               lineHeight: 22,
               align: 'center'
             },
             hr: {
               borderColor: '#8C8D8E',
               width: '100%',
               borderWidth: 1,
               height: 0
             },
             b: {
               color: '#4C5058',
               fontSize: 14,
               fontWeight: 'bold',
               lineHeight: 33
             },
             per: {
               color: '#fff',
               backgroundColor: '#4C5058',
               padding: [3, 4],
               borderRadius: 4
             }
           }
         },
         data: [
     
          { value: 258.7, name: "0-14岁" },
          { value: 513.3, name: "15-34岁" },
          { value: 798.1, name: "35-59岁" },
          { value: 621.9, name: "60岁以上" }
         ]
       }
     ]
   };
   myChart.setOption(option);
     // 监听浏览器缩放，图表对象调用缩放resize函数
  window.addEventListener("resize", function() {
    myChart.resize();
  });
   })();

